<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>登录注册</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    body{
      background: #333;
    }
    .register{
      width:300px;
      height:270px;
      margin:80px auto;
      padding:15px 30px;
      background:#eee;
      border-radius:5px;
    }
    .title{
      height:35px;
    }
    .title span{
      font-size:16px;
      font-weight:bold;
      color:#666;
      margin-right:30px;
      cursor:pointer;
    }
    .title span.current{
      color:#f00;
    }
    .form div{
      width:290px;
      height:30px;
      border-radius:8px;
      background:#fff;
      margin-bottom:25px;
      padding:8px 10px;
    }
    .form div span{
      display:inline-block;
      padding-top:7px;
    }
    .form input{
      border:none;
      outline:none;
    }
    .button{
      padding-top:7px;
    }

  </style>
</head>
<body>
  <div class="register">
    <p class="title">
      <span>登录</span>
      <span class="current">注册</span>
    </p>
    <div class="form">
      <div>
        <span>+86</span>
        <input type="text" name="user" id="user" placeholder="请输入手机号">
        <i></i>
        <p class="info"></p>
      </div>
      <div>
        <input type="password" name="password" id="password" placeholder="请输入密码">
        <i></i>
        <p class="info"></p>
      </div>
      <p class="button">
        <a href="javascript:void(0)" id="sigup-btn" class="sigup-btn">注册</a>
      </p>
    </div>
  </div>
  <script src="js/ajax.js"></script>
  <script>
    var user = document.getElementById('user'),
        pwd = document.getElementById('pwd'),
        sigup = document.getElementById('sigup-btn'),
        userInfo = document.getElementById('user_info'),
        isRepeat = false; // 记录用户名是否被占用

    // 检测用户
    user.addEventListener('blur', checkUser, false)
    function checkUser(){
      var userVal = user.value
      console.log(userVal)
    }

    sigup.addEventListener("click", register, false)
    function register(){
      // 如果手机号有效且没有被占用，同时密码合法，
      if(userReg.test(user.value) && pwdReg.test(pwd.value) && !isRepeat){
        console.log('ok')
      }
    }

    // 函数防抖
    const debounce = (func, wait=350) => {
      let timer = 0
      return (...args) => {
        if(timer){
          clearTimeout(timer)
        }
        timer = setTimeout(()=>{
          func.apply(this, args)
        }, wait)
      }
    }
    const debounce2 = (callback, wait = 350) => {
      let timer = 0
      return (...args) => {
        if(timer){
          clearTimeout(timer)
        }
        timer = setTimeout(()=>{
          func.apply(this, args)
        }, wait)
      }
    }

    // 函数节流
    const throttle = (func, wait = 100) => {
      let lastTime = 0
      return (...args) =>{
        let now = new Date().getTime()
        if(now - lastTime > wait){
          func.apply(this, args)
          lastTime = now
        }
      }
    }
    const throttle2 = (func, wait = 100) =>{
      let lastTime = 0
      return (...args) => {
        let now = new Date().getTime()
        if(now - lastTime > wait) {
          func.apply(this, args)
          lastTime = now
        }
      }
    }

    const throttle2 = (func, wait = 200) => {
      let lastTime = 0
      return (...args) => {
        let now = new Date().getTime()
        if(now - lastTime > wait){
          func.apply(this, args)
        }
      }
    }


  </script>
</body>
</html>